<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>下拉菜单</title>
	<style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .content {
            width: 280px;
            margin: 100px auto;
        }

        ul {
            list-style: none;
        }

        .list2 {
            height: auto;
            overflow: hidden;
        }

        /* 从第二个开始 */
        .list2+.list2 {
            border-top: 1px solid #fff;
        }

        .list2 .title {
            height: 84px;
            width: 280px;
            text-align: center;
            line-height: 84px;
            background-color: #3d3d3d;
            color: #fff;
            font-size: 24px;
            font-family: "Microsoft YaHei", "微软雅黑", Arial, Helvetica, sans-serif;
            font-weight: bold;
            /* 字母间距 根据字符 */
            letter-spacing: 8px;
            /* 单词间距 根据空格 */
            word-spacing: 8px;
            margin-bottom: 2px;
            cursor: pointer;
        }

        .item-second {
            height: 0;
            transition: height 0.5s;
            cursor: pointer;
        }

        .item-second div {
            background-color: #cccccc;
            font-size: 24px;
            font-family: "Microsoft YaHei", "微软雅黑", Arial, Helvetica, sans-serif;
            font-weight: bold;
            letter-spacing: 8px;
            word-spacing: 8px;
            margin-bottom: 2px;
            border-bottom: 2px solid #3d3d3d;
            text-align: center;
            line-height: 84px;
        }

        .item-second div:hover {
            background-color: #999999;
        }

        /* 表示同级 */
        .item-second.show {
            height: 252px;
        }

        .item-second>div {
            height: 84px;
        }
	</style>
</head>

<body>
<div class="content">
	<!-- 垂直导航 -->
	<div id="nav2">
		<ul class="left-list">
			<li class="list2">
				<div class="title">公司概况</div>
				<div class="item-second">
					<div>二级菜单一</div>
					<div>二级菜单二</div>
					<div>二级菜单三</div>
				</div>
			</li>
			<li class="list2">
				<div class="title">新闻资讯</div>
				<div class="item-second">
					<div>二级菜单一</div>
					<div>二级菜单二</div>
					<div>二级菜单三</div>
				</div>
			</li>
			<li class="list2">
				<div class="title">企业名录</div>
				<div class="item-second">
					<div>二级菜单一</div>
					<div>二级菜单二</div>
					<div>二级菜单三</div>
				</div>
			</li>
			<li class="list2">
				<div class="title">联系方式</div>
				<div class="item-second">
					<div>二级菜单一</div>
					<div>二级菜单二</div>
					<div>二级菜单三</div>
				</div>
		</li>
			<li class="list2">
				<div class="title">友情链接</div>
				<div class="item-second">
					<div>二级菜单一</div>
					<div>二级菜单二</div>
					<div>二级菜单三</div>
				</div>
			</li>
		</ul>
	</div>
</div>
<script src="jquery.min.js"></script>
<script>

	$('.title').on('change', function () {
		if ($(this).next().is('.show')) {
			$('.title').next().removeClass('show')
		} else {
			$('.title').next().removeClass('show');
			$(this).next().addClass('show')
		}
	})
	$('.title').on("click", function () {
		$('.title').triggerHandler("change");
	});

</script>
</body>

</html>